<template>
  <div class="rank">
    <div class="rank-list" v-for="item in topList" :key="item.title">
    <h3>{{item.title}}</h3>
    <div class="rank-list" v-for="itemList in item.list" :key="itemList.topId" @click="selectRankList(itemList)">
      <h4>{{itemList.label}}</h4>
      <ul>
        <li v-for="(musicItem, i) in itemList.song" :key="musicItem.songId">
          <span>{{i}}.{{musicItem.title}}-{{musicItem.singerName}}</span>
        </li>
      </ul>
     <div class="item">
       <img :src="itemList.picUrl" alt=""/>
    </div>
  </div>
</div>
</div>
</template>
<script>
import axios from 'axios'
export default {
  data(){
    return{
      topList:[]
    }
  },
  created(){
    this.getTopList()
  },
  methods:{
    getTopList(){
      axios.get("/jsososo/top/category", {
        params: {
          showDetail: 1
        }
      })
      .then(res => {
        console.log(res.data.data)
        this.topList=res.data.data
      })
      .catch(err => {
        console.error(err);
      })
    },
    selectRankList(itemList) {
      const id = itemList.topId;
      this.$router.push({ path: `/ranklistdetail/${id}` });
    },
  },
}
</script>
<style scoped>
.rank-list{
  display: flex;
}
.item{
  width: 50%;
}
.item>img{
  width: 120px;
}
</style>